import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
let cube, controls


const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

function createCube() {
    const geometry = new THREE.BoxGeometry( 2, 2, 2 ); 
    // 1,按顺序定义颜色数组
    const colorArr = ['red', 'green','blue','pink','orange','white']
    // 2, 按顺序便利
    const materialArr = colorArr.map(colorItem => {
        return new THREE.MeshBasicMaterial({
            color: colorItem
        })
    })
    // 3,材质数组放入网格数组
    cube = new THREE.Mesh( geometry, materialArr );
    scene.add( cube );
}
controls = new OrbitControls( camera, renderer.domElement );
camera.position.set(0,5,10) // 设置摄像机的位置


function createAxes (){ // 总体的
    const axesHelper = new THREE.AxesHelper(20)
    scene.add(axesHelper)
}
function animate() {
	requestAnimationFrame( animate );
	controls.update();
	renderer.render( scene, camera );
}
function resize () {
    window.addEventListener('resize', () => {
        renderer.setSize(window.innerWidth,window.innerHeight)
        camera.aspect = window.innerWidth/window.innerHeight
        camera.updateProjectionMatrix()
    })
}

resize()
createCube()
createAxes()
animate()






